<div class="bg-white pb-6 sm:pb-8 lg:pb-12">
  <div class="mx-auto max-w-screen-2xl px-4 md:px-8">
    <header class="mb-8 flex items-center justify-between border-b py-4 md:mb-12 md:py-8 xl:mb-16">
      <!-- logo - start -->
      <a
        href="/"
        class="text-black-800 inline-flex items-center gap-2.5 text-2xl font-bold md:text-3xl"
        aria-label="logo"
      >
        <svg
          width="95"
          height="94"
          viewBox="0 0 95 94"
          class="h-auto w-6 text-indigo-500"
          fill="currentColor"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path d="M96 0V47L48 94H0V47L48 0H96Z" />
        </svg>

        Flowrift
      </a>
      <!-- logo - end -->

      <!-- nav - start -->
      <nav class="hidden gap-12 lg:flex">
        <a href="#" class="text-lg font-semibold text-indigo-500">Home</a>
        <a
          href="#"
          class="
            text-lg
            font-semibold
            text-gray-600
            transition
            duration-100
            hover:text-indigo-500
            active:text-indigo-700
          "
          >Features</a
        >
        <a
          href="#"
          class="
            text-lg
            font-semibold
            text-gray-600
            transition
            duration-100
            hover:text-indigo-500
            active:text-indigo-700
          "
          >Pricing</a
        >
        <a
          href="#"
          class="
            text-lg
            font-semibold
            text-gray-600
            transition
            duration-100
            hover:text-indigo-500
            active:text-indigo-700
          "
          >About</a
        >
      </nav>
      <!-- nav - end -->

      <!-- buttons - start -->
      <a
        href="#"
        class="
          hidden
          rounded-lg
          bg-gray-200
          px-8
          py-3
          text-center text-sm
          font-semibold
          text-gray-500
          outline-none
          ring-indigo-300
          transition
          duration-100
          hover:bg-gray-300
          focus-visible:ring
          active:text-gray-700
          md:text-base
          lg:inline-block
        "
        >Contact Sales</a
      >

      <button
        type="button"
        class="
          inline-flex
          items-center
          gap-2
          rounded-lg
          bg-gray-200
          px-2.5
          py-2
          text-sm
          font-semibold
          text-gray-500
          ring-indigo-300
          hover:bg-gray-300
          focus-visible:ring
          active:text-gray-700
          md:text-base
          lg:hidden
        "
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-6 w-6"
          viewBox="0 0 20 20"
          fill="currentColor"
        >
          <path
            fill-rule="evenodd"
            d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h6a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
            clip-rule="evenodd"
          />
        </svg>

        Menu
      </button>
      <!-- buttons - end -->
    </header>

    <section class="flex flex-col items-center">
      <!-- notice - start -->
      <div class="flex items-center gap-2 rounded border bg-gray-50 p-2 text-gray-500">
        <span
          class="
            mt-0.5
            rounded-full
            bg-indigo-100
            px-2
            py-1
            text-xs
            font-semibold
            leading-none
            text-indigo-800
          "
          >New</span
        >

        <span class="text-sm">This is a section of some simple filler text.</span>

        <a
          href="#"
          class="
            text-sm
            font-bold
            text-indigo-500
            transition
            duration-100
            hover:text-indigo-600
            active:text-indigo-700
          "
          >More</a
        >
      </div>
      <!-- notice - end -->

      <div
        class="flex max-w-xl flex-col items-center pt-8 pb-0 text-center sm:pb-16 lg:pt-32 lg:pb-32"
      >
        <p class="mb-4 font-semibold text-indigo-500 md:mb-6 md:text-lg xl:text-xl">
          Very proud to introduce
        </p>

        <h1 class="text-black-800 mb-8 text-4xl font-bold sm:text-5xl md:mb-12 md:text-6xl">
          Revolutionary way to build the web
        </h1>

        <p class="mb-8 leading-relaxed text-gray-500 md:mb-12 xl:text-lg">
          This is a section of some simple filler text, also known as placeholder text. It shares
          characteristics of real text.
        </p>

        <div class="flex w-full flex-col gap-2.5 sm:flex-row sm:justify-center">
          <a
            href="#"
            class="
              inline-block
              rounded-lg
              bg-indigo-500
              px-8
              py-3
              text-center text-sm
              font-semibold
              text-white
              outline-none
              ring-indigo-300
              transition
              duration-100
              hover:bg-indigo-600
              focus-visible:ring
              active:bg-indigo-700
              md:text-base
            "
            >Start now</a
          >

          <a
            href="#"
            class="
              inline-block
              rounded-lg
              border
              bg-white
              px-8
              py-3
              text-center text-sm
              font-semibold
              text-gray-500
              outline-none
              ring-indigo-300
              transition
              duration-100
              hover:bg-gray-100
              focus-visible:ring
              active:bg-gray-200
              md:text-base
            "
            >Take tour</a
          >
        </div>
      </div>
    </section>
  </div>
</div>
